<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
   <div class="dashboard-container" id="food-app">
    <div class="container">
      <div class="tableBar">
        <div class="tableLab">
          <el-button
            type="primary"
            @click="add()"
          >
            + 添加教师
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="atName"
          label="教师姓名"
        ></el-table-column>
        <el-table-column   prop="schoolName" label="所属学校">
        </el-table-column>
        <el-table-column
          prop="atRemark"
          label="教师介绍"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="edit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              class="delBut non"
              @click="deleteHandle(scope.row.atId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

     <el-dialog
             :title="aceTeacher.title"
             :visible.sync="aceTeacher.dialogVisible"
             width="30%"
             :before-close="handleClose"
     >
       <el-form
               class="demo-form-inline"
               label-width="100px"
       >
         <el-form-item label="教师姓名：">
           <el-input
                   v-model="aceTeacher.atName"
                   placeholder="请输入教师姓名"
                   maxlength="14"
           />
         </el-form-item>
         <el-form-item label="所属学校：">
           <el-input
                   v-model="aceTeacher.schoolName"
                   placeholder="请输入专业id"
                   maxlength="14"
           />
         </el-form-item>
         <el-form-item label="教师简介：">
           <el-input
                   v-model="aceTeacher.atRemark"
                   placeholder="请输入教师简介"
                   maxlength="14"
           />
         </el-form-item>
       </el-form>

       <span
               slot="footer"
               class="dialog-footer"
       >
        <el-button
                size="medium"
                @click="aceTeacher.dialogVisible = false"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
     </el-dialog>

   </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/food.js"></script>
    <script>
      new Vue({
        el: '#food-app',
        data() {
          return {
            action: '',
            input: '',
             counts: 0,
             page: 1,
             pageSize: 10,
             tableData : [],
             dishState : '',
             checkList: [],
             type :'',
             aceTeacher:{
               'title': '添加教师信息',
               "dialogVisible":false,
               "atId":"",
               "atName":"",
               "schoolName":"",
               "atRemark":"",

             }
          }
        },
        computed: {},
        created() {
          this.init()
        },
        mounted() {
        },
        methods: {
          async init () {
            // const params = {
            //   page: this.page,
            //   pageSize: this.pageSize,
            //   name: this.input ? this.input : undefined
            //
            // }
            await getDishPage({'page': this.page, 'pageSize': this.pageSize}).then(res => {
              if (String(res.code) === '200') {
                this.tableData = res.data
                this.counts = res.data.total
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          },
          getImage (image) {
            return `/common/download?name=${image}`
          },

          handleQuery() {
            this.page = 1;
            this.init();
          },

          // 添加
          add (st) {
            this.action = 'add'
            this.aceTeacher.atName = ''
            this.aceTeacher.schoolName = ''
            this.aceTeacher.atRemark = ''
            this.aceTeacher.dialogVisible = true
          },
          edit(dat) {
            this.action = 'edit'
            this.aceTeacher.title = '修改教师信息'
            this.aceTeacher.atId=dat.atId
            this.aceTeacher.atName = dat.atName
            this.aceTeacher.schoolName = dat.schoolName
            this.aceTeacher.atRemark = dat.atRemark
            this.aceTeacher.dialogVisible = true
          },
          // 关闭弹窗
          handleClose(st) {
            this.aceTeacher.dialogVisible = false
          },

          // 删除
          deleteHandle (atId) {
            this.$confirm('确认删除该教時信息, 是否继续?', '确定删除', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
            }).then(() => {
              deleteDish(atId).then(res => {
                if (String(res.code === "200")) {
                  this.$message.success('删除成功！')
                  this.handleQuery()
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            })
          },

          //数据提交
          submitForm(st) {
            const classData = this.aceTeacher
            const valid = (classData.atName === 0 ||classData.atName)  && (classData.schoolName === 0 || classData.schoolName)&& (classData.atRemark === 0 || classData.atRemark)
            if (this.action === 'add') {
              if (valid) {
                const reg = /^\d+$/

                addTeacher({'atName': this.aceTeacher.atName,'schoolName': this.aceTeacher.schoolName,'atRemark': this.aceTeacher.atRemark}).then(res => {
                  if (String(res.data === 200)) {
                    this.$message.success('添加成功！')
                    if (!st) {
                      this.aceTeacher.dialogVisible = false
                    } else {
                      this.aceTeacher.atName = ''
                      this.aceTeacher.schoolName = ''
                      this.aceTeacher.atRemark = ''
                    }
                    // this.$message.success('添加成功！')
                    // this.handleClose()
                    this.handleQuery()
                  } else {
                    this.$message.error(res.msg || '操作失败')
                  }
                }).catch(err => {
                  this.$message.error('请求出错了：' + err)
                })


              } else {
                this.$message.error('输入框数据不能为空')
              }
            } else if (valid) {
              const reg = /^\d+$/

              //TODO 修改数据
              editTeacher({'atId': this.aceTeacher.atId,'atName': this.aceTeacher.atName,'schoolName': this.aceTeacher.schoolName,'atRemark': this.aceTeacher.atRemark}).then(res => {
                if (String(res.data === 200)) {
                  this.$message.success('修改成功！')

                  this.aceTeacher.dialogVisible = false
                  this.handleQuery()

                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })

            } else {
              this.$message.error('输入框数据不能为空')
            }
          },
          handleSizeChange (val) {
            this.pageSize = val
            this.init()
          },
          handleCurrentChange (val) {
            this.page = val
            this.init()
          },
      /*//状态更改
      statusHandle (row) {
        let params = {}
        if (typeof row === 'string' ) {
          if (this.checkList.length === 0) {
            this.$message.error('批量操作，请先勾选操作教師信息！')
            return false
          }
          params.id = this.checkList.join(',')
          params.status = row
        } else {
          params.id = row.id
          params.status = row.status ? '0' : '1'
        }
        /!*this.dishState = params
        this.$confirm('确认更改该菜品状态?', '提示', {
          'confirmButtonText': '确定',
          'cancelButtonText': '取消',
          'type': 'warning'
        }).then(() => {
          // 起售停售---批量起售停售接口
          dishStatusByStatus(this.dishState).then(res => {
            if (res.code === 1) {
              this.$message.success('菜品状态已经更改成功！')
              this.handleQuery()
            } else {
              this.$message.error(res.msg || '操作失败')
            }
          }).catch(err => {
              this.$message.error('请求出错了：' + err)
          })
        })*!/
      },*/

          // 全部操作
          handleSelectionChange (val){
            let checkArr = []
            val.forEach((n) => {
              checkArr.push(n.atId)
            })
            this.checkList = checkArr
          },

        }
      })

    </script>
</body>
</html>